<template>
    <div class="web-container book-type">
        <div class="content">
            <div class="item" v-for="(item,index) in list" :key="index" @click="goToInfo(item)">
                <span class="item-cover" :style="'backgroundImage:url('+item.cover+')'"></span>
                <div class="item-center">
                    <span class="name" v-html="item.bookName">123</span>
                    <span class="author">{{item.author}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  props:["list"],
  data() {
    return {
      currentPage: 1
    };
  },
  components: {},
  methods: {
    goToInfo(item) {
      this.$router.push("/book/info?bookId=" + item.bookId + "&columnId=" + item.columnId);
    }
  }
};
</script>
<style lang="less" scoped>
.book-type {
//   background: #fff;
//   border-radius: 10px;
//   min-height: 800px;
  .content {
    padding: 0px 20px 20px 20px;
    height: 100%;
    .pagination {
      margin-top: 20px;
    }
    .item {
      display: flex;
      margin-top: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #f1f1f1;
      cursor: pointer;
      .item-cover {
        width: 156px;
        height: 210px;
        display: block;
        background: url("/static/images/base/book.png") no-repeat;
        background-size: cover;
      }
      .item-center {
        margin-left: 30px;
        flex: 1;
        span {
          display: block;
        }
        .name {
          font-size: 20px;
          margin-top: 6px;
        }
        .author {
          font-size: 16px;
          margin-top: 18px;
          color: #868686;
        }
        .desc {
          margin-top: 56px;
          font-size: 16px;
          color: #a1a1a1;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
      }
      .item-right {
        //   margin-top: 50px;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        flex: 1;
        flex-direction: column;
        .el-button {
          background-color: #15c798;
          line-height: 32px;
          width: 110px;
          font-size: 16px;
          padding: 0px 20px;
          border: 2px solid transparent;
          .el-button--primary:focus,
          .el-button--primary:hover {
            background-color: #15c798;
          }
        }
      }
    }
  }
}
</style>


